<template>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
  
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
  
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel">
        <div class="pull-left image">
          <img :src=avatar class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>{{userName}}</p>
          <!-- Status -->
          <router-link to="/profile">
            <i class="fa fa-circle text-success"></i> {{email}}</router-link>
        </div>
      </div>
  
      <!-- Sidebar Menu -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">HEADER</li>
        <!-- Optionally, you can add icons to the links -->
        <router-link to="/general" active-class="active" tag="li">
          <a class="nav-link">
            <i class="glyphicon glyphicon-home"></i>
            <span>概览</span>
          </a>
        </router-link>
  
        <router-link to="/apps" active-class="active" tag="li">
          <a class="nav-link">
            <i class="glyphicon glyphicon-th"></i>
            <span>应用管理</span>
          </a>
        </router-link>
  
        <router-link to="/devices" active-class="active" tag="li">
          <a class="nav-link nav-devices">
            <i class="fa fa-fw fa-sitemap"></i>
            <span>设备管理</span>
          </a>
        </router-link>
  
        <router-link to="/sessions" active-class="active" tag="li">
          <a class="nav-link">
            <i class="fa fa-fw fa-comments"></i>
            <span>会话数据</span>
          </a>
        </router-link>
  
        <li>
          <a class="nav-link" target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=852b701ff532423e69e5527abfdb4619a62c3a7bdfa523d3873616a08d1635d4">
            <i class="fa fa-qq"></i>
            <span>开发者社区</span>
          </a>
        </li>
        <li>
          <a class="nav-link" target="_blank" href="//pan.baidu.com/s/1hsGd5Gw">
            <i class="fa fa-download"></i>
            <span>资源下载</span>
          </a>
        </li>

      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'sidebar',
  computed: {
    ...mapState({
      email: state => state.auth.email,
      avatar: state => state.auth.avatar,
    }),
  },
  data: function () {
    return {
      userName: this.$store.getters.userName,
    }
  }
}
</script>
